import React from "react";

import { Checkbox } from "antd";
import { CloudDownloadOutlined } from "@ant-design/icons";

import "./FontItem.css";

/**
 *
 * @param {{
 * onFontChange:(checkedValue:any)=>void,
 * onDownloadClick:(e:any)=>void
 * fontName:string,
 * checked:boolean
 * }} props
 */
const FontItem = (props) => {
  const { fontName, checked, onDownloadClick, onFontChange } = props;
  return (
    <>
      <div>
        <Checkbox
          onChange={(e) => onFontChange && onFontChange(fontName, e)}
          checked={checked}
        />
      </div>
      <div>{fontName}</div>
      <div
        className="download_icon"
        style={{ fontSize: "24px", cursor: "pointer" }}
      >
        <CloudDownloadOutlined
          onClick={(e) => onDownloadClick && onDownloadClick(fontName, e)}
        />
      </div>
    </>
  );
};

export default FontItem;
